<template>
  <div class="carousel">
    <!-- <div class="swiper-title">
      <h1>八卦堂</h1>
    </div> -->
    <div class="carousel-inner">
      <div v-for="(image, index) in images" :key="index" class="carousel-item" :class="{ active: activeIndex === index }">
        <img :src="image" alt="轮播图" @error="handleImageError(index)">
      </div>
    </div>
    <div class="carousel-indicators">
      <span v-for="dot in images.length" :key="dot" class="indicator" :class="{ active: activeIndex === dot - 1 }" @click="showSlide(dot - 1)"></span>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';

export default {
  props: {
    images: {
      type: Array,
      required: true,
    },
  },
  setup(props) {
    const activeIndex = ref(0);
    const intervalId = ref(null);

    const carouselInner = ref(null);

    onMounted(() => {
      nextTick(() => {
        carouselInner.value = document.querySelector('.carousel-inner');
        showSlide(0); // 初始化显示第一张图片
      });
    });

    onUnmounted(() => {
      clearInterval(intervalId.value);
    });

    // showSlide 函数：这个函数用于显示指定索引的幻灯片。当你点击指示点（indicator）时，会触发这个函数。它接受一个参数 index，这个参数代表了你想要显示的幻灯片的索引。
    // activeIndex.value = index;：这行代码将 activeIndex（一个响应式引用）的值设置为传入的 index，这样 activeIndex 就会跟踪当前显示的幻灯片索引。
    // clearInterval(intervalId.value);：这行代码清除了之前设置的自动轮播定时器，防止在切换幻灯片时出现多个定时器同时运行。
    // intervalId.value = setInterval(nextSlide, 5000);：这行代码重新设置了一个定时器，每隔 5000 毫秒（5 秒）调用一次 nextSlide 函数，从而实现自动轮播。
    const showSlide = (index) => {
      activeIndex.value = index;
      clearInterval(intervalId.value);
      intervalId.value = setInterval(nextSlide, 5000);
    };

    // nextSlide 函数：这个函数用于在自动轮播时切换到下一张幻灯片。它没有接受任何参数，而是直接操作 activeIndex 的值。
    // activeIndex.value = (activeIndex.value + 1) % props.images.length;：这行代码将 activeIndex 的值增加 1，
    // 然后对 props.images 数组的长度取模。这样，当 activeIndex 达到 props.images.length（图片数组的长度）时，它会回到 0，实现循环播放的效果。
    const nextSlide = () => {
      activeIndex.value = (activeIndex.value + 1) % props.images.length;
      // 更新幻灯片位置
      carouselInner.value.style.transform = `translateX(${-activeIndex.value * 100}%)`;
    };

    const handleImageError = (index) => {
      // 处理图片加载失败，例如移除图片或替换为占位图
      // 这里可以添加逻辑来处理图片加载失败的情况
      console.error(`Image at index ${index} failed to load.`);
    };

    return {
      activeIndex,
      showSlide,
      handleImageError,
    };
  },
};
</script>

<style scoped>
.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 600px;
}

.swiper-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  text-align: center;
  align-items: center;
  /* padding: 10px 0 10px 10px; */
  background-color: #2b9e9387;
  color: #f6c297;
  font-family: SimSun;
  z-index: 10;
}

.carousel-inner {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease;
}

.carousel-item {
  background-color: #f0f0f0; /* 占位符颜色 */
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  margin: 0 5px;
  cursor: pointer;
}

.indicator.active {
  background-color: #333;
}
</style>